<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extra/spring-security">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" type="shortcut icon" th:href="@{/img/favicon.ico}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    <title>Echo - 首页</title>
<!--    <script th:inline="javascript" type="text/javascript">-->

<!--        //  在JS中获取ModelMap中的值-->
<!--        var baseUrl = [[${baseUrl}]];-->

<!--        // 保存到浏览器中-->
<!--        localStorage.setItem("baseUrl",baseUrl);-->
<!--    </script>-->
</head>
<body>
<div class="nk-container">

    <!-- 头部 -->
    <header class="bg-light sticky-top" th:fragment="header" style="box-shadow: 5px 5px 5px #cfcccc;">
        <div class="container">
            <!-- 导航 -->
            <nav class="navbar navbar-expand-lg navbar-dark">
                <!-- logo -->
                <a class="navbar-brand"  th:href="@{/index}"><img src="../img/logo.png" style="width:147px; height: 42px"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- 功能 -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item ml-3 btn-group-vertical">
                            <a class="nav-link" th:href="@{/index}">
                                <i class="bi bi-house"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser != null}">
                            <a class="nav-link position-relative" th:href="@{/notice}">
                                <i class="bi bi-envelope"></i> 消息
                                <span class="badge badge-danger" th:text="${allUnreadCount!=0 ? allUnreadCount : ''}"></span>
                            </a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser == null}">
                            <a class="nav-link" th:href="@{/site/register.html}">注册</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical" th:if="${loginUser == null}">
                            <!-- th:href = "http://localhost:8001/site/login.html" -->
                            <a class="nav-link" th:href="@{/site/login.html}">登录</a>
                        </li>
                        <li class="nav-item ml-3 btn-group-vertical dropdown" th:if="${loginUser != null}">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <img th:src="${loginUser.user.headerUrl}" class="rounded-circle" style="width:30px;"/>
                                 <span class="rounded-circle" th:utext="${loginUser.user.username}"></span>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item text-center" th:href="@{/info(id=${loginUser.user.id})}"><i class="bi bi-person-fill"></i> 个人主页</a>
                                <a class="dropdown-item text-center" th:href="@{/site/setting.html}"><i class="bi bi-gear"></i> 账号设置</a>
                                <a class="dropdown-item text-center" th:href="@{/data}" sec:authorize="hasAnyAuthority('admin')"><i class="bi bi-clipboard-data"></i> 数据统计</a>
                                <a class="dropdown-item text-center" th:href="@{/logout}"><i class="bi bi-box-arrow-right"></i> 退出登录</a>
                                <div class="dropdown-divider"></div>
                            </div>
                        </li>
                    </ul>
                    <!-- 搜索 -->
                    <form class="form-inline my-2 my-lg-0" method="get" th:action="@{/search}">
                        <input class="form-control mr-sm-2" type="search" name="keyword" th:value="${keyword}" aria-label="Search" />
                        <button class="btn btn-outline-light my-2 my-sm-0 serach-btn" type="submit"><i class="bi bi-search"></i> 搜索</button>
                    </form>
                </div>
            </nav>
        </div>
    </header>

    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <div class="position-relative">
                <!-- 筛选条件 -->
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <a th:class="|nav-link ${orderMode==0 ? 'active' : ''}|" th:href="@{/index(orderMode=0)}"  ><i style="color: #6c71c4" class="bi bi-lightning"></i> <span style="color: darkorchid">最新</span></a>
                    </li>
                    <li class="nav-item">
                        <a th:class="|nav-link ${orderMode==1 ? 'active' : ''}|" th:href="@{/index(orderMode=1)}"><i class="bi bi-hand-thumbs-up"></i> 最热</a>
                    </li>
                </ul>

                <a th:href="@{/site/discuss-publish.html}" th:if="${loginUser != null}">
                    <button type="button" class="btn btn-primary btn-sm position-absolute rt-0">
                        <i class="bi bi-plus-square"></i> 我要发布
                    </button>
                </a>

            </div>

            <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="hintModalLabel">提示</h5>
                        </div>
                        <div class="modal-body" id="hintBody"></div>
                    </div>
                </div>
            </div>
            <!-- 帖子列表 -->
            <ul class="list-unstyled" th:each="list:${page.records}">
                <li class="media pb-3 pt-3 mb-3 border-bottom" >
                    <a th:href="@{/info(id=${list?.userId})}" th:if="${list?.userId}">
                        <img th:src="${list.headerUrl}"  class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
                    </a>
                    <div  class="media-body">
                        <h6 class="mt-0 mb-3">
                            <a th:text="${list.title}" th:href="@{/disDetail(pid=${list.id})}"></a>
                           <span class="badge badge-secondary bg-danger"
                                  style="font-weight: 500; color: #f85959; background-color: rgba(248,89,89,0.1) !important;">顶</span>
                           <span class="badge badge-secondary bg-primary"
                                  style="font-weight: 500; color: #3c8cff; background-color: rgba(60,140,255,0.1) !important;">精</span>
                        </h6>
                        <div class="text-muted font-size-12">
                            <u class="mr-3" ></u> 发布于 &nbsp; <b th:text="${list.post}" style="color: #008BA7"></b>
                            <ul class="d-inline float-right">
                                <li class="d-inline ml-2">赞 <span></span></li>
                                <li class="d-inline ml-2">|</li>
                                <li class="d-inline ml-2">回帖 <span></span></li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
            <!--分页 -->
            <nav class="mt-5" th:if = "${page.total>0}" th:fragment="pagination">
                <ul class="pagination justify-content-center">
                    <li class="page-item" th:class="|page-item ${page.current==1? 'disabled':''}|">
                        <a class="page-link" th:href="@{${page.path}(current=1)}" >首页</a>
                    </li>
                    <li th:class="|page-item ${page.current==1?'disabled':''}|">
                        <a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a>  <!-- ${page.path} -->
                    </li>
                    <!--numbers.sequence 生成一个 page.from 到 page.to 的连续整数数组-->
                    <!-- page.from,page.to -->     <li th:each="i:${#numbers.sequence(page.from,page.to)}" th:class="|page-item ${i==page.current? 'active' : ''}|" >
                    <a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}"></a>
                </li>
                    <li th:class="|page-item ${page.current==page.pages ? 'disabled':''}|">
                        <a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
                    </li>
                    <li class="page-item" th:class="|page-item ${page.current==page.pages ? 'disabled':''}|">
                        <a class="page-link"  th:href="@{${page.path}(current=${page.pages})}">末页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>


    <!-- 尾部 -->
    <footer class="bg-dark" th:fragment="footer" style="background-color: rgb(149,117,244) !important;">
    </footer>
</div>

<script th:src="@{/js/jquery-3.1.0.min.js}"></script>
<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/httpUtils.js}"></script>
<script th:src="@{/js/index.js}"></script>
</body>
</html>
